<html>
<head></head>
<body><a name="ZH-CN_TOPIC_0000002313462937"></a><a name="ZH-CN_TOPIC_0000002313462937"></a>
<h1>弹出框层级管理</h1>
<div><p>
    ArkUI的弹出框节点都是直接挂载在根节点上，会根据层级从小到大依次挂载。根节点下，右边的弹出框节点会覆盖显示在左边的弹出框节点上，新创建的弹出框节点会根据层级大小插入到对应的位置，同一层级大小的弹窗节点按照创建的先后顺序进行挂载。</p>
    <p>从API version 18开始，可以通过设置<a
            href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction#basedialogoptions11"
            target="_blank">levelOrder</a>参数来管理弹出框的显示顺序，确保层级较高的弹出框覆盖在层级较低的弹出框之上，从而根据需要灵活控制各层弹出框的显示效果。
    </p>
    <div class="section" id="使用约束"><a name="ZH-CN_TOPIC_0000002313462937__%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a><a
            name="%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a>     <h4>使用约束</h4>
        <p>目前<a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-uicontext-custom-dialog">openCustomDialog</a>、<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-custom-dialog">CustomDialog</a>、<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-fixes-style-dialog#警告弹窗-alertdialog">AlertDialog</a>、<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-fixes-style-dialog#列表选择弹窗-actionsheet">ActionSheet</a>、<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-fixes-style-dialog#对话框-showdialog">showDialog</a>支持通过levelOrder参数来管理弹出框的层次。
        </p>
        <div class="note"><img originheight="38" originwidth="102"
                               src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163043.45686238185904785169518006111967:50001231000000:2800:90EA0E69DDE64C9DFC4DB48A5CC110847071419AAA05A4BD7FFA995266D1C3F1.png"><span
                class="notetitle"> </span>
            <div class="notebody"><p>
                弹出框层级管理不支持子窗场景，即当showInSubWindow设置为true时，levelOrder参数设置无效。不支持动态刷新弹出框的显示顺序。</p>
            </div>
        </div>
    </div>
    <div class="section" id="创建不同层级的弹出框"><a
            name="ZH-CN_TOPIC_0000002313462937__%E5%88%9B%E5%BB%BA%E4%B8%8D%E5%90%8C%E5%B1%82%E7%BA%A7%E7%9A%84%E5%BC%B9%E5%87%BA%E6%A1%86"></a><a
            name="%E5%88%9B%E5%BB%BA%E4%B8%8D%E5%90%8C%E5%B1%82%E7%BA%A7%E7%9A%84%E5%BC%B9%E5%87%BA%E6%A1%86"></a>
        <h4>创建不同层级的弹出框</h4>
        <div class="note"><img originheight="38" originwidth="102"
                               src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163043.82122752134380300839167150876210:50001231000000:2800:7B7092CDA5DD430864A4E3239C83F8532109987E4C8B233F56E71CEC56A5B9AB.png"><span
                class="notetitle"> </span>
            <div class="notebody"><p>详细变量定义请参考<a href="#完整示例">完整示例</a>。</p></div>
        </div>
        <p>1.初始化一个弹出框内容区，内部包含一个Text组件。</p>
        <pre class="ts">@Builder normalCustomDialog(index: number) {
  Column() {
    Text("我是普通弹窗" + index).fontSize(30)
  }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
}</pre>
        <p>2.初始化另一个弹出框内容区，内部包含一个点击打开普通弹出框的按钮，点击事件中通过调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#uicontext"
                target="_blank">UIContext</a>中<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#getpromptaction"
                target="_blank">getPromptAction</a>方法获取<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#promptaction"
                target="_blank">PromptAction</a>对象，在通过该对象调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#opencustomdialog12"
                target="_blank">openCustomDialog</a>接口，并且设置层级为0的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction#basedialogoptions11"
                target="_blank">levelOrder</a>参数来创建普通层级弹出框。</p>
        <pre class="ts">@Builder topCustomDialog() {
  Column() {
    Text("我是置顶弹窗").fontSize(30)
    Row({ space: 50 }) {
      Button('点我打开普通弹窗')
        .onClick(() =&gt; {
          this.getUIContext().getPromptAction().openCustomDialog({
            builder: () =&gt; {
              this.normalCustomDialog(this.dialogIndex)
            },
            levelOrder: LevelOrder.clamp(0),
          })
            .catch((err: BusinessError) =&gt; {
              console.error("openCustomDialog error: " + err.code + " " + err.message)
            })
          this.dialogIndex++
        })
    }
  }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
}</pre>
        <p>3.通过调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#uicontext"
                target="_blank">UIContext</a>中<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#getpromptaction"
                target="_blank">getPromptAction</a>方法获取<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#promptaction"
                target="_blank">PromptAction</a>对象，在通过该对象调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#opencustomdialog12"
                target="_blank">openCustomDialog</a>接口，并且设置层级为100000的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction#basedialogoptions11"
                target="_blank">levelOrder</a>参数来创建最高层级弹出框。</p>
        <pre class="ts">this.getUIContext().getPromptAction().openCustomDialog({
  builder: () =&gt; {
    this.topCustomDialog()
  },
  levelOrder: LevelOrder.clamp(100000)
}).catch((err: BusinessError) =&gt; {
  console.error("openCustomDialog error: " + err.code + " " + err.message)
})</pre>
    </div>
    <div class="section" id="完整示例"><a name="ZH-CN_TOPIC_0000002313462937__%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B"></a><a
            name="%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B"></a>     <h4>完整示例</h4>
        <pre class="ts">import { LevelOrder } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @StorageLink('dialogIndex') dialogIndex: number = 0

  @Builder normalCustomDialog(index: number) {
    Column() {
      Text("我是普通弹窗" + index).fontSize(30)
    }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder topCustomDialog() {
    Column() {
      Text("我是置顶弹窗").fontSize(30)
      Row({ space: 50 }) {
        Button('点我打开普通弹窗')
          .onClick(() =&gt; {
            this.getUIContext().getPromptAction().openCustomDialog({
              builder: () =&gt; {
                this.normalCustomDialog(this.dialogIndex)
              },
              levelOrder: LevelOrder.clamp(0),
            })
              .catch((err: BusinessError) =&gt; {
                console.error("openCustomDialog error: " + err.code + " " + err.message)
              })
            this.dialogIndex++
          })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column({ space: 5 }) {
        Button('点击弹窗')
          .fontSize(20)
          .onClick(() =&gt; {
            this.getUIContext().getPromptAction().openCustomDialog({
              builder: () =&gt; {
                this.topCustomDialog()
              },
              levelOrder: LevelOrder.clamp(100000)
            }).catch((err: BusinessError) =&gt; {
              console.error("openCustomDialog error: " + err.code + " " + err.message)
            })
          })
      }.width('100%')
    }
  }
}</pre>
        <p><span><img originheight="783" originwidth="432"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163043.35564564218333832515934004779774:50001231000000:2800:5CD0F2F4C51D91889012E8538B195486B5ED71BBF3EC4802252D459021FF8D61.gif"></span>
        </p></div>
</div>
<div></div>
</body>
</html>